<!DOCTYPE html>
<html
        layout:decorator="component/mainLayout"
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:th="http://www.thymeleaf.org"
        lang="en" xmlns:layout="http://www.w3.org/1999/xhtml">
<head>
    <title>商品订单</title>
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css" media="all"/>
    <script src="/layui/layui.js" charset="utf-8"></script>
    <style>
        .laytable-cell-1-0-3{
            height: 100% !important;
        }
    </style>
</head>

<body layout:fragment="contentCenter">
<table id="orderDetailListTable" lay-filter="tableFilter"></table>
<script type="text/html" id="toolbarDemo">
    <button class="layui-btn layui-btn-normal" lay-event="echartOrderDetail" id="orderDetail-btn"><i class="layui-icon">&#xe608;</i>商品图表分析</button>
</script>
    <script>
        $(document).ready(function () {
            sliderCollapse.open('#orderCollapse');
        })
        layui.use(['table','jquery','element','form','layer'], function(){
            var table = layui.table
                , $ = layui.jquery
                , layer = layui.layer
                , form = layui.form
                , element = layui.element;
            table.render({
                elem: '#orderDetailListTable'
                ,url:'/order/getAllOrderDetailList'
                ,toolbar: '#toolbarDemo'
                // ,toolbar: 'true'
                // ,defaultToolbar: ['filter', 'print', 'exports']
                ,cellMinWidth: 200 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                ,title: '货物数据表'
                ,limit:20
                ,totalRow:true
                ,cols: [        //  "[["需要将两个括号拆开换行，因为[[…]]之间的表达式在Thymeleaf被认为是内联表达式
                    [
                        {field:'cargo.cargoName', title:'商品名', width:100, unresize: true,align:'center',templet:function (res) {
                                return res.cargo.cargoName;
                            }},
                        {field:'detailId', title:'商品售卖订单', width:280, unresize: true,align:'center'}
                        ,{field:'cargo.cargoRetailPrice', title:'单价（元）', width:120,align:'center',templet:function (res) {
                            return res.cargo.cargoRetailPrice;
                        }}
                        ,{field:'cargo.cargoUrl', title:'商品图片', width:200, align:'center',templet: function(res){
                            return '<img src="'+res.cargo.cargoUrl+'"></img>';
                        }}
                        ,{field:'cargoNum', title:'售卖数量',sort: true,width:100,align:'center'}
                        ,{field:'amount', title:'售卖价钱（元）',sort: true,align:'center'}
                        ,{field:'createDatetime', title:'下单时间', width:200,sort: true,align:'center'}
                    ]]
                ,page: true,id:'orderDetailListTableId',
            });

            table.on('toolbar(tableFilter)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                console.log(checkStatus);
                switch(obj.event){
                    case 'echartOrderDetail':
                        layer.open({
                            title:'商品销售图表',
                            type:2,
                            area: ['800px','600px'],
                            shift:2,
                            content:'/admin/orderDetailEchart',
                            closeBtn:2,
                            btn:false
                        })
                        break;
                    case 'getCheckLength':
                        var data = checkStatus.data;
                        layer.msg('选中了：'+ data.length + ' 个');
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选': '未全选');
                        break;
                };
            });

        })
    </script>
</body>
</html>